<template>
    <view class="orderlist">
        <u-toast ref="uToast"></u-toast>
        <view class="item" v-if="orderlist" v-for="(item, index) in orderlist" :key="index"
              @click="item.statusShow?'':NavTo(`/pages/Order/RunErrandsOrderDetails?id=${item.id}&Type=${Type}&orderType=${orderType}&riderClientStatus=${item.currentStatus} `)">
            <view v-if="item.statusShow" class="order_item_mask"></view>
            <!-- 状态栏 -->
            <view class="StatusBar flex_al_cen_ju_bet pos_r">
                <view class="pre pos_a">
                    <image v-if="item.isIm == 0" src="../../../static/images/pulice/yu.png" mode="scaleToFill"/>
                </view>
                <view class="Bar flex_al_cen_ju_bet">
                    <view style="width: 50rpx"></view>
                    <view v-if="item.statusShow">{{ item.status }}</view>
                    <view class="flex Runerrands" v-else>
                        <view class="num">
                            帮我{{ item.riderDo == 0 ? "送" : item.riderDo == 1 ? "买" : item.riderDo == 2 ? "取" : "买" }}
                        </view>
                        <view class="Time flex">
                            <u-icon name="clock" :key="index" color="#0c22b0" size="16"></u-icon>
                            <view class="mar_l_r flex" style="color: #0c22b0; font-size: 26rpx" v-if="item.isIm == 0">
                                {{ textTime(item.startTime) }}取货
                            </view>
                            <view class="mar_l_r flex" style="color: #0c22b0; font-size: 26rpx" v-else>
                                立即配送
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 跑腿 -->
                <view class="price" :class="item.statusShow?'color_aa':'red'">
                    ￥
                    <text>{{ item.price }}</text>
                </view>
            </view>
            <!-- 地址 + 内容 -->
            <view class="AddR_Cont">
                <!-- 地址 -->
                <Address :Type="Type" :statusShow="item.statusShow" :orderType="orderType" :TitleShow="TitleShow"
                         :item="item"></Address>
                <!-- 备注 -->
                <view class="remarks text_ovf"> 备注： {{ item.remark || "无" }}</view>
                <!-- 跑腿重量 -->
                <view class="world_quilaty" v-if="orderType == 1" :class="item.statusShow?'color_aa border_aa':''">
                    {{ item.articleWeight || 0 }}
                </view>
                <!-- 按钮状态 -->
                <view class="Botton">
                    <!-- 新任务-->
                    <view class="GrabanOrder" @click.stop="makeOrder(item.id, index)" v-if="Type == 0">
                        <text>{{ item.Btntitle }}</text>
                        <timer v-if="item.isIm == 1" :Times="forSeconds(item.createTime + 60 * 15 * 1000)"></timer>
                        <timer v-if="item.isIm == 0" :Times="forSeconds(item.startTime)"></timer>
                    </view>
                    <!-- 待取货 配送中 -->
                    <view class="GoodsCollected flex_al_cen_ju_bet" v-if="Type !== 0">
                        <view class="btn_icon_box">
                            <view class="phone" @click.stop="getPhoneList(item)">
                                <image v-if="item.riderClientStatus!=4&&!item.statusShow" class="btn_icon"
                                       src="../../../static/images/pulice/phone_icon.png" mode="">
                                </image>
                                <image v-else class="btn_icon" src="../../../static/images/pulice/phone_icon_cc.png"
                                       mode="">
                                </image>
                                <view :class="item.riderClientStatus==4||item.statusShow?'color_aa':''">联系</view>
                            </view>
                            <view
                                style="width: 2rpx;height: 40rpx;background-color: #D8D8D8;margin: 0 38rpx;"></view>
                            <view class="phone" @click.stop="clickIsShow(item)">
                                <image v-if="item.riderClientStatus==1 && item.status==1" class="btn_icon"
                                       src="../../../static/images/pulice/convertOrder_icon.png"
                                       mode=""></image>
                                <image v-else class="btn_icon"
                                       src="../../../static/images/pulice/convertOrder_icon_cc.png"
                                       mode=""></image>
                                <view :style="{color:(item.riderClientStatus==1 && item.status==1)?'':'#AAAAAA'}">转单
                                </view>
                            </view>
                        </view>

                        <!-- 待取货 -->
                        <view class="btn" :class="item.statusShow?'btn_c':''"
                              @click.stop="takeGoods(item.id, item.currentStatus, item.riderDo)"
                              v-if="item.riderDo == 1">
                            {{ item.BtnSaveTitle }}
                        </view>
                        <!-- 配送中 -->
                        <view class="distribution flex" v-if="item.riderDo !== 1">
                            <view class="Pickup" :class="item.statusShow?'btn_c':''"
                                  @click.stop="takeGoods(item.id, item.currentStatus, item.riderDo)">
                                {{ item.statusText }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import {forHour, forSeconds, forNowTime, textTime} from "@/utlis/time";
import type {Order} from "@/TS/Hooks/Home/components/Order";
import {NavTo} from "@/utlis/uni_api";
import runErrandsOrderMake from "@/Hooks/Home/components/runErrandsOrder";
import timer from "@/components/timer.vue";
import {
    reactive,
    getCurrentInstance,
    defineProps,
    ref,
    defineEmits,
} from "vue";

const {proxy} = getCurrentInstance() as any;

interface props {
    Type?: number; // 0:新任务 1:待取货 2:配送中
    orderlist: any;
    orderType: number; // {0,1}  0 外卖  1跑腿
}

/*订单类型  orderType {0,1}  0 外卖  1跑腿
   订单状态 Type{0,1,2}  0 新任务  1 待配送    2 配送中
   */
const Props = defineProps<props>();
const TitleShow = ref<boolean>(true);
let timeData = reactive<Order.timeData>({});

// 子传父

interface Emit {
    (event: "makeOrder", id: number): void;

    (event: "setSkipModel", SkipModel: boolean): void;

    (event: "setSendCodeModel", data: any): void;
}

const Emit = defineEmits<Emit>();
// 抢单
const {makeOrder, callPhone, takeGoods, clickIsShow, getPhoneList} = runErrandsOrderMake(
    proxy,
    Emit,
    Props
);
</script>
<style lang="scss" scoped>
@import "../../../static/css/Home/orderlist.scss";
</style>